<template>
    <div class="phone-box">
      <div class="phone-bg">
        <div class="phone-close">
          <el-button icon="el-icon-close" circle></el-button>
        </div>
        <iframe class="phone-content" :src="url" frameborder="0" seamless  width="280" height="653" sandbox="allow-same-origin allow-forms"></iframe>
        <img src="../assets/bg.png" alt="">
      </div>
    </div>
</template>

<script>
    export default {
      name: "phone",
      data(){
          return{
            url:'https://www.baidu.com/'
          }
      },
      methods:{
      }
    }
</script>

<style scoped lang="scss">
.phone-box{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 500;
  .phone-bg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 50px;
    .phone-close{
      position: absolute;
      right: -30px;
      top: -30px;
    }
    .phone-content{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width:350px;
      height:100%;
      z-index: 999;
      border-radius: 50px;
    }
    >img{
      -webkit-user-drag: none;
      user-drag: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      transform: scale(1.03);
    }
  }
}
</style>
